<template>
  <div class="home">
    <!--轮播图-->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img
            height="460px"
            :src="$target + item.imgPath"
            :alt="item.describes"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--商品列表区域-->
    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target + 'public/imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <my-list :listData="phoneList"></my-list>
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">家电</div>
            <div class="more">
              <div class="myMenu">
                <ul>
                  <li
                    :class="applianceActive == 1 ? 'active' : ''"
                    @mouseover="applianceMouseOver($event, 1)"
                  >
                    热门
                  </li>
                  <li
                    :class="applianceActive == 2 ? 'active' : ''"
                    @mouseover="applianceMouseOver($event, 2)"
                  >
                    电视
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/appliance/appliance-promo1.png'
                    "
                  />
                </li>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/appliance/appliance-promo2.png'
                    "
                  />
                </li>
              </ul>
            </div>
            <div class="list">
              <my-list :listData="applianceHotList"></my-list>
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域 -->
        <div class="accessory">
          <div class="box-hd">
            <div class="title">配件</div>
            <div class="more">
              <div class="myMenu">
                <ul>
                  <li
                    :class="partsActive == 1 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 1)"
                  >
                    热门
                  </li>
                  <li
                    :class="partsActive == 2 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 2)"
                  >
                    保护套
                  </li>
                  <li
                    :class="partsActive == 3 ? 'active' : ''"
                    @mouseover="partsMouseOver($event, 3)"
                  >
                    充电器
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/accessory/accessory-promo1.png'
                    "
                    alt
                  />
                </li>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/accessory/accessory-promo2.png'
                    "
                    alt
                  />
                </li>
              </ul>
            </div>
            <div class="list">
              <my-list :listData="partsHotList"></my-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import homeApi from "../api/homeApi";
export default {
  name: "Home",
  components: {},
  created() {
    //轮播图数据获取
    this.getCarousel();
    //获取所有首页相关的商品数据
    this.getProduct("phoneList", { categoryName: "手机" });
    this.getProduct(
      "applianceHotList",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    );
    this.getProduct("TVListData", { categoryName: "电视机" });
    this.getProduct(
      "partsHotList",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    );
    this.getProduct("coverListData", { categoryName: "保护套" });
    this.getProduct("chargerListData", { categoryName: "充电器" });
  },
  data() {
    return {
      carousel: [], //轮播图数据

      phoneList: [], //手机数据
      applianceList: [], //家电热门数据
      TVListData: [], //电视数据
      partsList: [], //配件热门数据
      coverListData: [], //保护套数据
      chargerListData: [], //充电器数据

      applianceHotList: [], //家电热门数据(渲染用

      partsHotList: [], //配件热门数据(渲染用

      applianceActive: 1, //当前选择的分类表示 //热门家电 1:热门数据 2:电视
      partsActive: 1, //配件分类 1热门  2保护套 3充电器
    };
  },
  methods: {
    //获取轮播图数据
    async getCarousel() {
      let { data: res } = await homeApi.getCarousel();
      this.carousel = res.carousel;
      console.log(this.carousel);
    },
    //获取商品数据
    async getProduct(dataName, data, hotFlag) {
      if (hotFlag) {
        var { data: res } = await homeApi.getHotProduct(data);
      } else {
        var { data: res } = await homeApi.getPromoProduct(data);
      }
      this[dataName] = res.Product;
    },
    applianceMouseOver(e, val) {
      //家电 1热门  2电视
      this.applianceActive = val;
    },
    partsMouseOver(e, val) {
      //配件 1热门  2保护套  3充电器
      this.partsActive = val;
    },
  },
  watch: {
    applianceActive(val) {
      //当applianceActive发生改变的时候 会触发监听属性
      if (!this.applianceList.length) {
        //如果刚开始applianceList没有内容 则证明没有点击过
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val === 1 ? this.applianceList : this.TVListData;
    },
    partsActive(val) {
      //1 --> 2|3
      console.log("监听属性", val); //1partsList  2 coverListData  3chargerListData
      if (!this.partsList.length) {
        //如果原始数据源length=0 第一次切换数据
        this.partsList = this.partsHotList;
      }
      let curData = null;
      switch (val) {
        case 1:
          curData = this.partsList;
          break;
        case 2:
          curData = this.coverListData;
          break;
        case 3:
          curData = this.chargerListData;
          break;
      }
      this.partsHotList = curData;
    },
  },
};
</script>
<style type="text/scss" lang="scss">
.main-box {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.main {
  margin: 0 auto;
  max-width: 1225px;
}

/* 轮播图CSS */
.block {
  margin: 0 auto;
  max-width: 1225px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 轮播图CSS END */

.box-hd {
  height: 58px;
  margin: 20px 0 0 0;
  .title {
    float: left;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
  }
  .more {
    float: right;
    a {
      font-size: 16px;
      line-height: 58px;
      color: #424242;
      &:hover {
        color: #ff6700;
      }
    }
    .myMenu li {
      float: left;
      margin-left: 30px;
      &.active,
      &:hover {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
      }
    }
  }
}

.box-bd {
  height: 615px;
  .promo-list {
    float: left;
    height: 615px;
    width: 234px;
    li {
      z-index: 1;
      width: 234px;
      height: 300px;
      margin-bottom: 14.5px;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      &:hover {
        z-index: 2;
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
      }
      img {
        width: 234px;
        height: 300px;
      }
    }
    img {
      width: 234px;
    }
  }
  .list {
    float: left;
    height: 615px;
    width: 991px;
  }
}
</style>
